<template>
  <div class="value-page">
    <!-- 项目基本信息 -->
    <div class="project-info">
      <div class="info-detail">
        <ul class="info-list">
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">申请人/部门：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProject.createRealName)"></span>/<span v-html="caseToShow(projectAuditInfo.hatchProject.bearDeptName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">申请时间：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProject.createTime)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目成果类型：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.mgTypeName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">归属公司：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.belongCompanyName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">需求提出部门：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.demandDeptName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目实施部门：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.landingDeptName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">实施地点：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.implementPlace)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">需求方负责人：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.teamAname)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">实施方负责人：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.projectLeaderName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目合作方式：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.cooperationTypeName)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">预期合作金额（万元）：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.budgetCost)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目实施周期：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.hopeStartDate)"></span>&nbsp;~&nbsp;<span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.hopeEndDate)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">期望完成时间：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.hopeComletedDate)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目目标对象：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.hasTargetObj)"></span>
          </li>
          <li>
            <div class="left">
              <img src="@/assets/dbcircle.png" alt="" />
              <span class="list-title">项目回避对象：</span>
            </div>
            <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.hasAvoidObj)"></span>
          </li>
        </ul>
      </div>
      <div class="info-detail">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">是否自主开发外部合作单位：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProject.applyCountryCode)"></span>
      </div>
      <div class="info-detail">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">项目引进说明：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.solvedProblem)"></span>
      </div>
      <div class="info-detail">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">项目价值效益：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProject.economyTarget)"></span>
      </div>
      <div class="info-detail">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">项目验收指标：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.functionAndPerformance)"></span>
      </div>
      <div class="info-detail">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">项目其他说明：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.otherReq)"></span>
      </div>
      <div class="info-title" v-if="projectAuditInfo.hatchProject.status==5">
        <img src="@/assets/category-blue.png" alt="" />
        <span>项目终止记录</span>
      </div>
      <div class="info-detail"  v-if="projectAuditInfo.hatchProject.status==5">
        <div class="row-content">
          <img src="@/assets/dbcircle.png" alt="" />
          <span class="list-title">项目终止说明：</span>
        </div>
        <span v-html="caseToShow(projectAuditInfo.hatchProjectMgTech.terminationMemo)"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { getParamValFromUrl, caseToShow } from '@/utils/common.js'
export default {
  name: 'ProjectBuildMG',
  components: {},
  data() {
    return {
      requrl: {
        codeInfoList: '/manage/codeInfo/list',
      },
    }
  },
  mounted() {
  },
  created() {},
  computed: {},
  props: {
    projectAuditInfo: {
      Type: Object,
      default: '',
    },
  },
  methods: {
    caseToShow(obj) {
      return caseToShow(obj)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-checkbox-disabled + span {
  color: black;
}
.project-info {
  color: black;
  .info-detail {
    background-color: #fff;
    border: 1px solid #ebebeb;
    padding: 1% 2.5%;
    margin-bottom: 15px;
    position: relative;
    font-size: 16px;
    > span {
      display: inline-block;
      margin-left: 15px;
    }
    .list-title {
      font-weight: 900;
      height: unset;
      line-height: 28px;
    }
    .row-content {
      display: flex;
      align-items: baseline;
      > span {
        white-space: normal;
      }
    }
    .info-list {
      padding: unset;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
      > li {
        width: 33.33%;
        padding: 3px 0;
        height: auto;
        display: flex;
        align-items: center;
        // >img{
        //   margin-right: 5px;
        // }
        .comment {
          white-space: pre-wrap;
        }
        span {
          // line-height: 1.2;
        }
      }
      .left {
        display: flex;
        align-items: baseline;
      }
      .one-row {
        width: 100%;
        align-items: baseline;
        height: auto;
        padding: 3px 0px;
        > span {
          width: calc(100% - 170px);
        }
      }
    }
    .info-content {
      .content-title {
        display: flex;
        align-items: center;
        font-weight: 900;
        img {
          margin-right: 5px;
        }
      }
      .content-box {
        padding: 5px 16px 0;
      }
    }
  }
  .info-title {
    display: flex;
    align-items: center;
    margin: 10px 0;
    > img {
      margin-right: 5px;
    }
    > span {
      font-size: 16px;
      font-weight: 900;
      color: black;
    }
  }
}
</style>